<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- CSS Transforms -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transforms -->
    <!-- CSS Transforms 是一个CSS模块，它定义了如何在二维或三维空间中转换元素的CSS样式。 -->

    <!-- 使用 CSS 变形 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -->
    <!-- 通过改变坐标空间，CSS transforms 可以在不影响正常文档流的情况下改变作用内容的位置。这篇指南提供了有关使用CSS变形（CSS transforms）的介绍。 -->
    <!-- CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。 -->
    <!-- 只有使用盒模型（Box Model）来定位的元素可以被变换（transformed）。根据一般经验（原文：As a rule of thumb），拥有 display: block 的元素是由盒模型定位的。 -->
    <!-- transform-origin -->
    <!-- 指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。 -->
    <!-- transform -->
    <!-- 指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。 -->

    <div>
        a
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">

        b
        <img style="transform: rotate(90deg); transform-origin: bottom left;"
            src="Screen Shot 2016-02-16 at 15.53.54.png">
        cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </div>
    <br><br><br><br><br>



    <!-- transform-origin -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin -->
    <!-- transform-origin CSS属性让你更改一个元素变形的原点。 -->
    <!-- 转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去） -->
    <!-- 如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。 -->
    <!-- 一个值： -->
    <!-- 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。 -->
    <!-- 两个值： -->
    <!-- 其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。 -->
    <!-- 另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。 -->
    <!-- 三个值： -->
    <!-- 前两个值和只有两个值时的用法相同。 -->
    <!-- 第三个值必须是<length>。它始终代表Z轴偏移量。 -->
    <!-- x-offset -->
    <!-- 定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。 -->
    <!-- offset-keyword -->
    <!-- left，right，top，bottom或center中之一，定义相对应的变形中心偏移。 -->
    <!-- y-offset -->
    <!-- 定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。 -->
    <!-- x-offset-keyword -->
    <!-- left，right或center中之一，定义相对应的变形中心偏移。 -->
    <!-- y-offset-keyword -->
    <!-- top，bottom或center中之一，定义相对应的变形中心偏移。 -->
    <!-- z-offset -->
    <!-- 定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。 -->
    <!-- keyword	value -->
    <!-- left	0% -->
    <!-- center	50% -->
    <!-- right	100% -->
    <!-- top	0% -->
    <!-- bottom	100% -->

    <!-- transform -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform -->
    <!-- CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 -->
    <!-- <transform-function> -->
    <!-- 要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。 -->
    <!-- none -->
    <!-- 不应用任何变换。 -->

    <!-- transform-function -->
    <!-- <transform-function> CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function -->

    <!-- translate() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#translate -->
    <!-- translate() 这个CSS 函数用于移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。 -->
    <!-- translate(tx)       或    translate(tx, ty) -->
    <!-- tx -->
    <!-- 该参数为 <length> ，表示要移动矢量的横坐标。 -->
    <!-- ty -->
    <!-- 该参数为 <length> ，表示要移动矢量的纵坐标。 如果不写则默认为零，例如  translate(2) 表示 translate(2, 0)。 -->
    <div>
        translate
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: translate(50px, 20px);">
    </div>

    <!-- rotate() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#rotate -->
    <!-- The rotate() CSS 函数 定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如 transform-origin 属性所指定) 。 移动量由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针 。 180°的旋转称为点反射 (point reflection)。 -->
    <!-- rotate(a) -->
    <!-- a -->
    <!-- 该参数表示 <angle> 代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。 -->
    <div>
        rotate
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: rotate(22.5deg);">
    </div>

    <!-- skew() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#skew -->
    <!-- skew() 这个CSS函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。 -->
    <!-- skew(ax)       或    skew(ax, ay) -->
    <!-- ax -->
    <!-- 该参数为一个角度 <angle> ， 表示用于沿着横坐标扭曲元素的角度 。 -->
    <!-- ay -->
    <!-- 该参数为一个角度 <angle> ， 表示用于沿纵坐标扭曲元素的角度 。 -->
    <div>
        skew
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: skew(22.5deg, 22.5deg);">
    </div>

    <!-- scale() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#matrix -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#scale -->
    <!-- The scale() CSS 函数可改变元素的大小。 它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。 -->
    <!-- 这种变换的特点是矢量的坐标可定义在每个不同方向上各子完成一定比例缩放。如果矢量的两个坐标相等，则缩放是均匀的或各向同性的，并且元素的形状被保留。在这种情况下，缩放函数定义了一个同调变换。 -->
    <!-- 当超出 [-1, 1]范围外时，缩放将在坐标方向上放大元素；当在该范围内时，它在该方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。 -->
    <!-- scale(sx) or    scale(sx, sy) -->
    <!-- sx -->
    <!-- 该参数为 <number> 类型值， 代表缩放矢量的横坐标。 -->
    <!-- sy -->
    <!-- 该参数为 <number> 类型值，代表缩放矢量的纵坐标 。 如果不存在，则其默认值为 sx，从而导致保持元素形状进行均匀缩放。 -->
    <div>
        scale
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: scale(2, 0.5);">
    </div>

    <!-- matrix() -->
    <!-- CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。 -->
    <!-- matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写 -->
    <!-- matrix(a, b, c, d, tx, ty) -->
    <!-- a b c d -->
    <!-- 以 <number> 的格式来描述线性变换 -->
    <!-- tx ty -->
    <!-- 以 <number> 的格式来描述变换的量 -->
    <!-- ☆☆☆Transformation Matrix 变换矩阵☆☆☆ -->
    <!-- https://zhuanlan.zhihu.com/p/147791525 -->
    <div>
        matrix
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);">
    </div>

    <!-- rotateX() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#rotatex -->
    <!-- rotateX() 这个CSS 函数定义了将元素在横坐标上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。 -->
    <!-- rotateX(a)是 rotate3D(1, 0, 0, a)的简写形式。 -->
    <!-- rotateX(a) -->
    <!-- a -->
    <!-- 该参数为 <angle> 代表旋转的角度， 正角表示顺时针旋转，负角表示逆时针旋转。 -->
    <div>
        rotateX
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: rotateX(45deg);">
    </div>

    <!-- rotateY() -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function#rotatey -->
    <!-- rotateY() 这个CSS 函数定义了将元素在纵坐标上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。 -->
    <!-- rotateY(a) 是 rotate3D(0, 1, 0, a) 的简写形式。 -->
    <!-- rotateY(a) -->
    <!-- a -->
    <!-- 该参数为 <angle> 代表旋转的角度， 正角表示顺时针旋转，负角表示逆时针旋转。 -->
    <div>
        rotateY
        <img src="Screen Shot 2016-02-16 at 15.53.54.png">
        <img src="Screen Shot 2016-02-16 at 15.53.54.png" style="transform: rotateY(45deg);">
    </div>

    <!-- <angle> -->
    <!-- CSS 数据类型 <angle> 用于表示角的大小，单位为度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）。在 <gradient> 和 transform 的某些方法等场景中有所应用。 -->
    <!-- deg -->
    <!-- 度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。 -->
    <!-- grad -->
    <!-- 百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。 -->
    <!-- rad -->
    <!-- 弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。 -->
    <!-- turn -->
    <!-- 圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。 -->

</body>

</html>